<template>
  <div>
     <div>
       <el-divider content-position="left">
         <b style="color: #67C23A">全时蜜雪批次库存查询模块</b>
       </el-divider>

       <el-form :model="queryParams" ref="queryXYForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
         <el-form-item label="批次号" prop="orderNo" >
           <el-input
             v-model="queryParams.taskId"
             placeholder="请输入批次号"
             clearable
             @keyup.enter.native="handleQuery"
           />
         </el-form-item>

         <el-form-item>
           <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
           <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
         </el-form-item>
       </el-form>

       <el-table v-loading="loading" :data="tableData" :row-class-name="tableRowClassName">>
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="批次号" align="center" prop="taskId"/>
         <el-table-column label="批次名称" align="center" prop="taskName" />
         <el-table-column label="优惠券名称" align="center" prop="selectCoupons.couponRuleName" />
         <el-table-column label="优惠券模版id" align="center" prop="couponRuleId" />
         <el-table-column label="采买数量" align="center" prop="purchaseCount" />
         <el-table-column label="已发数量" align="center" prop="sendCount" />
         <el-table-column label="结算比例" align="center" prop="settlementRatio" />
       </el-table>
<!--       <pagination-->
<!--         v-show="total>0"-->
<!--         :total="total"-->
<!--         :page.sync="queryParams.current"-->
<!--         :limit.sync="queryParams.pageSize"-->
<!--         @pagination="queryXYFrom"-->
<!--       />-->
     </div>

  </div>
</template>
<script>
import axios from 'axios'
export default {

    created() {
      this.queryXYFrom();
    },

  data() {
    return {
          // 遮罩层
          loading: true,
          // 是否显示弹出层
          open: false,
          tableData: [],
          total: 0,
          queryParams:{
            current: 1,
            pageSize: 100,
            taskId:null,
          },
          // 显示搜索条件
          showSearch: true,
          title: "",
          // 表单参数
          form: {},

    };
  },

  methods: {
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        taskId: null,
      };
      this.xyForm("form");
    },

    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryXYFrom();
    },
    resetQuery() {
      this.xyForm("queryXYForm");
      this.queryXYFrom();
    },
    queryXYFrom(){
      this.loading = true;
      axios.post('http://47.110.49.47:8077/api/sharing/queryProducts', this.queryParams)
        .then(res => {
          if (res.data.code ==200){
            console.log(res.data.encryptData)
            this.tableData =JSON.parse( res.data.encryptData);
            //this.total = this.tableData.length;
          }
          this.loading = false;
          // 根据需要处理响应数据
        })
    },

    tableRowClassName({row, rowIndex}) {
      if (rowIndex%2 === 1) {
        return 'success-row';
      }
      return '';
    },

    xyForm(){
      this.queryParams.taskId = '';
      this.$refs.queryXYForm.resetFields();
    }
  }
}
</script>
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
